<template>
  <view class="container">
    <u-navbar title="售后详情" height="50"></u-navbar>
    <view v-if="showTop" class="top">
      <view class="" v-if="refunInfo.way == 20">
        <u-steps :list="numList" :current="stepNum"></u-steps>
        <!-- <view class="time">
					<view class="">
						12-23 10:00
					</view>
					<view class="">
						12-23 10:00
					</view>
					<view class="" >
						12-23 10:00
					</view>
					<view class="">
						12-23 10:00
					</view>
				</view> -->
      </view>
      <view class="" v-else>
        <u-steps :list="numList2" :current="stepNum2"></u-steps>
        <!-- <view class="time">
					<view class="">
						12-23 10:00
					</view>
					<view class="">
						12-23 10:00
					</view>
					<view class="">
						12-23 10:00
					</view>
				</view> -->
      </view>
    </view>
    <view class="tip"> 注：退款完成后，退款金额按原支付路径返回 </view>
    <view
      class="success"
      v-if="status == 1 && refunInfo.way == 20 && stepNum == 1"
      style="margin-top: 15rpx"
    >
      {{ consultList[1].content }}
    </view>
    <view class="tip" v-if="refunInfo.auditReason" style="margin-top: 15rpx">
      商家拒绝退款：{{ refunInfo.auditReason }}
    </view>
    <view class="item-view" @click="routeTo(2)">
      协商历史
      <u-icon class="more" name="/static/img/more.png" size="20rpx"></u-icon>
    </view>

    <view class="middle">
      <view class="midde-title">
        退款信息
        <view v-if="status == 1" @click="onMobile(refunInfo.sellerPhone)" class="title-tip">
          联系商家
        </view>
        <view v-if="status == 2" @click="onMobile(refunInfo.buyerPhone)" class="title-tip">
          联系买家
        </view>
      </view>
      <view class="order-goods">
        <u-icon class="goods-img" :name="refunInfo.picUrl" size="160"></u-icon>
        <view class="orde-riget">
          <view class="goods-title">
            {{ refunInfo.spuName }}
          </view>
          <view class="goods-speci">
            数量{{ refunInfo.count }}
            <!-- <text class="goods-num">x10</text> -->
          </view>
          <!-- <view class="goods-price">
						¥88.60
					</view> -->
        </view>
      </view>
      <view class="desc">
        <p>交易单号：{{ refunInfo.orderNo }} </p>
        <p>申请原因：{{ refunInfo.applyDescription }}</p>
        <p>申请金额：¥{{ refunInfo.refundPrice }} </p>
        <p>申请时间：{{ refTime(refunInfo.refundTime) }}</p>
      </view>
      <view class="">
        <image
          v-for="(item, index) in refunInfo.applyPicUrls"
          :src="item"
          :key="index"
          style="margin-right: 10rpx; width: 150rpx; height: 150rpx"
          mode=""
        ></image>
      </view>
      <!-- v-if="status == 1 && stepNum == 2" -->
      <view
        v-if="stepNum > 1"
        class=""
        style="
          margin-top: 20rpx;
          padding: 15rpx 0;
          border-top: #ededed solid 2rpx;
          line-height: 50rpx;
        "
      >
        <p>{{ express[1] }} </p>
        <p>{{ express[2] }}</p>
      </view>
    </view>

    <view v-if="status == 1" class="floor">
      <view
        v-if="refunInfo.way == 20 && refunInfo.status == 20"
        class="hollow-btn"
        style="color: #0f76bc; border: #0f76bc solid 2rpx"
        @click="routeTo('/other/express/express?id=' + refunInfo.id + '&status=2')"
      >
        寄回物流
      </view>
      <view v-if="showTop" @click="canAalesAfter" class="hollow-btn"> 撤销申请 </view>
    </view>

    <view v-if="status == 2" class="floor">
      <view
        v-if="refunInfo.way == 20 && refunInfo.status == 10"
        class="hollow-btn"
        style="color: #0f76bc; border: #0f76bc solid 2rpx"
        @click="show = true"
      >
        是否同意退款？
      </view>
      <view
        v-if="refunInfo.way == 20 && refunInfo.status == 30"
        @click="onCancelReceive"
        class="hollow-btn"
      >
        拒绝收货
      </view>
      <view
        v-if="refunInfo.way == 20 && refunInfo.status == 30"
        @click="onReceive"
        class="hollow-btn"
      >
        确认收货
      </view>

      <view
        v-if="refunInfo.way == 20 && refunInfo.status == 40"
        @click="onMerConfirm"
        class="hollow-btn"
      >
        确认退款
      </view>
      <view
        v-if="refunInfo.way == 10 && refunInfo.status == 10"
        class="hollow-btn"
        style="color: #0f76bc; border: #0f76bc solid 2rpx"
        @click="show = true"
      >
        是否同意退款？
      </view>
    </view>

    <u-popup v-model="show" mode="center" border-radius="15" width="600" height="500">
      <view class="popup-box">
        <text>允许退款？</text>
        <u-radio-group v-model="value">
          <u-radio
            @change="radioChange"
            v-for="(item, index) in list"
            :key="index"
            :name="item.status"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
        <view v-if="value == 0" style="display: flex; margin: 20rpx 0">
          <text>拒接原因</text>
          <input v-model="auditReason" placeholder="请输入拒绝原因" />
        </view>

        <view v-if="value == 1 && refunInfo.way == 20" style="display: flex; margin: 20rpx 0">
          <text>收货人</text>
          <input v-model="auditReason" placeholder="收货人" />
        </view>

        <view v-if="value == 1 && refunInfo.way == 20" style="display: flex; margin: 20rpx 0">
          <text>收货人电话</text>
          <input v-model="deliveryMobile" placeholder="收货人电话" />
        </view>
        <view v-if="value == 1 && refunInfo.way == 20" style="display: flex; margin: 20rpx 0">
          <text>收货详细地址</text>
          <input v-model="deliveryDetailAddress" placeholder="收货详细地址" />
        </view>

        <!-- <view v-if="value == 1 && refundInfo == 20" style="display:flex; margin: 20rpx 0;">
					<text>收货</text>
					<input v-model="auditReason" placeholder="收货人"/>
				</view> -->

        <view @click="confirmRef" class="submit-btn2" style="">确认</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      showTop: true,
      type: 1,
      status: 2, // 1用户。 2.商家
      stepNum: 0,
      stepNum2: 0,
      order_id: '',
      order_refund_id: '',
      numList: [
        {
          name: '商家审核中'
        },
        {
          name: '待商品寄回'
        },
        {
          name: '待商家收货'
        },
        {
          name: '商家收货'
        },
        {
          name: '退款完成'
        }
      ],
      numList2: [
        {
          name: '提交申请'
        },
        {
          name: '商家审核'
        },
        {
          name: '退款完成'
        }
      ],

      list: [
        {
          name: '允许',
          status: 1
        },
        {
          name: '拒绝',
          status: 0
        }
      ],
      refundType: '',
      refunInfo: {
        way: ''
      },
      consultList: '',
      express: [],
      value: '',
      auditReason: '',
      deliveryDetailAddress: '',
      deliveryMobile: '',
      deliveryAreaId: '520001'
    }
  },
  onLoad(options) {
    this.$u.get('/app-api/trade/after-sale-log/list', { afterSaleId: options.id }).then((res) => {
      this.consultList = res.data
      for (let item of res.data) {
        if (item.content.includes('快递公司')) {
          this.express = item.content.split('，')
          break
        }
      }
    })

    this.status = options.status
    let url =
      this.status == 2 ? '/app-api/trade/after-sale/get-seller' : '/app-api/trade/after-sale/get'
    this.$u.get(url, { id: options.id }).then((res) => {
      this.refunInfo = res.data
      if (res.data.status == 61) {
        this.showTop = false
      } else if (res.data.status == 10) {
        this.stepNum = 0
        this.numList[0].name = '审核中'
        this.stepNum2 = 0
        //this.numList2[1].name = "审核通过"
      } else if (res.data.status == 20) {
        this.stepNum = 1
        this.numList2[1].name = '审核通过'
        this.stepNum2 = 2
      } else if (res.data.status == 30) {
        this.stepNum = 2
      } else if (res.data.status == 40) {
        this.stepNum2 = 2
        this.stepNum = 3
      } else if (res.data.status == 50) {
        this.stepNum = 4
      } else if (res.data.status == 62) {
        this.numList[0].name = '商家拒绝退款'
      } else if (res.data.status == 63) {
        this.numList[2].name = '商家拒绝收货'
      }
    })
  },
  computed: {
    refTime: function () {
      return (e) => {
        return this.$utils.parseTime(e)
      }
    }
  },
  methods: {
    previewImg(e) {
      uni.previewImage({
        current: 0,
        urls: e
      })
    },
    radioChange(e) {
      console.log(e)
      this.value = e
    },

    canAalesAfter() {
      uni.dialog.confirm('温馨提示', '撤回售后？', () => {
        this.$u.delete('/app-api/trade/after-sale/cancel?id=' + this.refunInfo.id).then((res) => {
          uni.navigateBack()
        })
      })
    },
    routeTo(url) {
      if (url == 2) {
        uni.navigateTo({
          url:
            '/other/after-sales-consult/after-sales-consult?consultList=' +
            JSON.stringify(this.consultList) +
            '&refunInfo=' +
            JSON.stringify(this.refunInfo)
        })

        return
      }
      uni.navigateTo({
        url
      })
    },
    confirmRef() {
      this.show = false
      if (this.value) {
        uni.dialog.confirm('温馨提示', '允许用户退款申请？', () => {
          if (this.refunInfo.way == 10) {
            this.$u.put('/app-api/trade/after-sale/agree?id=' + this.refunInfo.id).then((res) => {
              this.$u.toast('成功')
              uni.navigateBack({
                delta: 0
              })
            })
            return
          }

          this.$u
            .put('/app-api/trade/after-sale/agree-address', {
              id: this.refunInfo.id,
              auditReason: this.auditReason,
              deliveryAreaId: this.deliveryAreaId,
              deliveryMobile: this.deliveryMobile,
              deliveryDetailAddress: this.deliveryDetailAddress
            })
            .then((res) => {
              this.$u.toast('成功')
              uni.navigateBack({
                delta: 0
              })
            })
        })
      } else {
        if (!this.auditReason) {
          this.$u.toast('拒绝退款需要填写拒绝原因')
          return
        }
        uni.dialog.confirm('温馨提示', '拒绝用户退款申请？', () => {
          this.$u
            .put('/app-api/trade/after-sale/disagree', {
              id: this.refunInfo.id,
              auditReason: this.auditReason
            })
            .then((res) => {
              this.$u.toast('成功')
            })
        })
      }
    },
    onReceive() {
      uni.dialog.confirm('温馨提示', '确认收货？', () => {
        this.$u.put('/app-api/trade/after-sale/receive?id=' + this.refunInfo.id).then(() => {
          this.$u.toast('成功')
          uni.navigateBack({
            delta: 0
          })
        })
      })
    },
    onCancelReceive() {
      uni.dialog.confirm('温馨提示', '拒绝收货？', () => {
        this.$u.put('/app-api/trade/after-sale/refuse', { id: this.refunInfo.id }).then(() => {
          uni.navigateBack({
            delta: 0
          })
          this.$u.toast('成功')
        })
      })
    },
    onMerConfirm() {
      uni.dialog.confirm('温馨提示', '确认退款，退款金额将退回用户？', () => {
        this.$u.put('/app-api/trade/after-sale/refund?id=' + this.refunInfo.id).then(() => {
          this.$u.toast('成功')
          uni.navigateBack({
            delta: 0
          })
        })
      })
    },
    onMobile(e) {
      uni.makePhoneCall({
        phoneNumber: e
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('../../style/btn.css');
page {
  background: #eeeeef;
  padding: 20rpx;
}

.top {
  background-color: #fff;
  padding: 40rpx 0;
}
.tip {
  padding: 18rpx;
  background-color: #ffe4e0;
  color: #f54831;
}
.success {
  padding: 18rpx;
  background-color: #67c23a;
  color: #fff;
}
.time {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
}

.item-view {
  background-color: #fff;
  padding: 20rpx 15rpx;
  font-size: 30rpx;
  position: relative;
  margin: 20rpx 0;
}
.more {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}

.middle {
  background-color: #fff;
  padding: 20rpx;
}

.midde-title {
  font-size: 30rpx;
  padding-bottom: 20rpx;
}

.title-tip {
  float: right;
}
.order-goods {
  display: flex;
  border-bottom: #ededed solid 2rpx;
  padding-bottom: 15rpx;
}

.goods-img {
  border-radius: 20rpx;
}

.orde-riget {
  width: 100%;
  margin-left: 10rpx;
  line-height: 55rpx;
  font-size: 26rpx;
}

.goods-speci {
  position: relative;
}

.goods-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
}
.goods-price {
  font-size: 30rpx;
  color: #f54831;
}

.desc {
  margin-top: 20rpx;
}
.desc p {
  margin-bottom: 15rpx;
}
.floor {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  height: 90rpx;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  margin-left: -20rpx;
  padding: 0 20rpx;
}
.popup-box {
  padding: 20rpx;
}

.submit-btn2 {
  //position: absoulte;
  bottom: 10rpx;
  left: 50%;
  //transform:tranla
  width: 550rpx;
  height: 60rpx;
  background-color: #0f76bc;
  border-radius: 40rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  line-height: 60rpx;
}
</style>
